<template>
    <view class="address-select">   
        <u-picker :show="show" ref="uPicker" :columns="columns" keyName="label" confirmColor="#0000A6"
            @change="changeAddress" @cancel="close" @confirm="handleAddrConfirm"></u-picker>  
    </view> 
</template>

<script setup lang="ts">
 import { watch,ref,reactive } from 'vue';
 import {getAsalAreas} from '@/model';
 const props = defineProps({
    defaultVal:{ type:Array, default:()=>[]},   // 默认值 必须是数组
    title:{ type:String, default:''}, // 标题
    showFlag:{ type:Boolean, default:false},  // 双向绑定的数据,控
    level: {
        type:Number,default: 3
    }
})

const show = ref<boolean>(false);
let columns = ref<any>([]);
let optionsList = ref<any>([]);  // 原始数据

const init =async ()=>{
    try{
        const {list} = await getAsalAreas({api_version: 0});
        optionsList.value = list;
        columns.value[0] = list.map((item:any) => {
            return {
                label: item.area_name,
                pathid: item.pathid
            }
        })
        columns.value[1] = list[0].childrens.map((item:any) => {
            return {
                label: item.area_name,
                pathid: item.pathid
            }
        })
        if(props.level>=3){
            columns.value[2] = list[0].childrens[0].childrens.map((item:any) => {
                return {
                    label: item.area_name,
                    pathid: item.pathid
                }
            })
        }
   
    }catch(e){
    }
}

/** 省市区三级联动选择地址改变*/
const changeAddress =(e:any)=>{
    const {
        columnIndex, // 当前列下标
        value,  // 为当前变化列的数组内容
        values, // 全部列数组内容
        index, 	// 当前值下标
        indexs, // 当前地区值下标
    } = e
    
    // 第一列改变
    if(columnIndex === 0){
        // 获取第二列的值
        columns.value[1] = optionsList.value[index].childrens.map((item:any) => {
            return {
                label: item.area_name,
                pathid: item.pathid
            }
        })
        if(props.level>=3){
            // 获得第二列初始化后的第三列的值
            columns.value[2] = optionsList.value[index].childrens[0].childrens.map((item:any) => {
                return {
                    label: item.area_name,
                    pathid: item.pathid
                }
            })
        }
    }
    
    // 第二列改变
    if(columnIndex === 1 && props.level>=3){
        // 获得第三列的值
        columns.value[2] = optionsList.value[indexs[0]].childrens[index].childrens.map((item:any) => {
            return {
                label: item.area_name,
                pathid: item.pathid
            }
        })
    }
}
		
const emit = defineEmits(['update:showFlag','on-confirm'])

/** 省市区三级联动确认*/
const handleAddrConfirm = (e:any)=>{
    const { indexs, values, value } = e;  
    emit('on-confirm',{province:value[0].label,city:value[1].label,district:props.level>=3?value[2].label:'',pathid:value[props.level-1].pathid});
    show.value = false
}


// 取消
const close = ()=>{
    show.value = false;
    emit('update:showFlag',show.value);
}


 watch(()=>props.showFlag , async(newVal,oldVal)=>{
    if(newVal){            
        show.value = true;
        init()
        
    }
},{immediate:true})

</script>

